<script setup lang="ts">

// const { t } = useI18n()
definePage({
  name: 'schedule',
  meta: {
    level: 2,
    title: '📅 比赛赛程',
    i18n: 'home.schedule',
  },
})

const matchItems = [
  {
    title:'8月9日',
    date:'2025-08-09',
    isDelay:false,
    matchList:[
      {
        title:'小组赛A组第1轮',
        id:'A1',
        match:
          {
            team:'狂飙台球',
            team1Score:63,
            team2:'中聚科兴',
            team2Score:49,
            time:'19:30-20:30'
          }
      },{
        title: '小组赛B组第1轮',
        id:'B1',
        match:
          {
            team:'九妹门业',
            team1Score:53,
            team2:'荣万家物业',
            team2Score:47,
            time:'20:40-21:40'
          }
      }
    ]
  },
  {
    title:'8月10日',
    date:'2025-08-10',
    matchList:[
      {
        title:'小组赛A组第2轮',
        id:"A2",
        match:
          {
            team:'李记烧烤城',
            team1Score:30,
            team2:'水沫兰庭',
            team2Score:28,
            time:'19:00-20:00'
          }
      },{
        title: '小组赛B组第2轮',
        id:"B2",
        match:
          {
            team:'卫生服务站',
            team1Score:45,
            team2:'国泰君安',
            team2Score:47,
            time:'20:10-21:10'
          }
      }
    ]
  },{
    title:'8月11日',
    date:'2025-08-11',
    matchList:[
      {
        title:'小组赛A组第3轮',
        id:"A3",
        match:
          {
            team:'狂飙台球',
            team1Score:54,
            team2:'水沫兰庭',
            team2Score:38,
            time:'19:00-20:00'
          }
      },{
        title: '小组赛B组第3轮',
        id:"B3",
        match:
          {
            team:'荣万家物业',
            team1Score:55,
            team2:'国泰君安',
            team2Score:44,
            time:'20:10-21:10'
          }
      }
    ]
  },{
    title:'8月12日',
    date: '2025-08-12',
    isDelay:false,
    matchList:[
      {
        title:'小组赛A组第4轮',
        id:"A4",
        match:
          {
            team:'中聚科兴',
            team1Score:55,
            team2:'李记烧烤城',
            team2Score:58,
            time:'19:00-20:00'
          }
      },{
        title: '小组赛B组第4轮',
        id:"B4",
        match:
          {
            team:'卫生服务站',
            team1Score:42,
            team2:'荣万家物业',
            team2Score:64,
            time:'20:10-21:10'
          }
      }
    ]
  },{
    title:'8月13日',
    date:'2025-08-13',
    matchList:[
      {
        title:'小组赛A组第5轮',
        id:"A5",
        match:
          {
            team:'狂飙台球',
            team1Score:72,
            team2:'李记烧烤城',
            team2Score:69,
            time:'19:00-20:00'
          }
      },{
        title: '小组赛B组第5轮',
        id:"B5",
        match:
          {
            team:'九妹门业',
            team1Score:65,
            team2:'卫生服务站',
            team2Score:50,
            time:'20:10-21:10'
          }
      }
    ]
  },{
    title:'8月14日',
    date:'2025-08-14',
   matchList:[
      {
        title:'小组赛A组第6轮',
        id:"A6",
        match:
          {
            team:'水沫兰庭',
            team1Score:83,
            team2:'中聚科兴',
            team2Score:57,
            time:'19:00-20:00'
          }
      },{
        title: '小组赛B组第6轮',
        id:"B6",
        match:
          {
            team:'九妹门业',
            team1Score:67,
            team2:'国泰君安',
            team2Score:49,
            time:'20:10-21:10'
          }
      }
    ]
  },{
    title:'8月15日',
    date:'2025-08-15',
    matchList:[
      {
        title:'半决赛第1轮',
        id:"C1",
        match:
          {
            team:'狂飙台球',
            team1Score:60,
            team2:'荣万家物业',
            team2Score:38,
            time:'19:00-20:00'
          }
      },{
        title: '半决赛第2轮',
        id:"C2",
        match:
          {
            team:'九妹门业',
            team1Score:57,
            team2:'李记烧烤城',
            team2Score:45,
            time:'20:10-21:10'
          }
      }
    ]
  },{
    title:'8月16日',
    date:'2025-08-16',
    matchList:[
      {
        title:'三四名决赛',
        id:"D1",
        match:
          {
            team:'荣万家物业',
            team1Score:64,
            team2:'李记烧烤城',
            team2Score:62,
            time:'19:00-20:00'
          }
      },{
        title: '罚篮&三分大赛',
        id:"D2",
        match:
          {
            team:'罚篮大赛',
            team1Score:0,
            team2:'三分大赛',
            team2Score:0,
            time:'20:05-20:25'
          }
      },{
        title: '总决赛',
        id:"D3",
        match:
          {
            team:'狂飙台球',
            team1Score:53,
            team2:'九妹门业',
            team2Score:34,
            time:'20:30-21:30'
          }
      }
    ]
  }
]
const active = ref(7)

const router = useRouter();
function jumpToDetail(item) {
  console.log('item',item,router)
  router.push(`/schedule/gameDetail?id=${item.id}`);
}

</script>

<template>
  <Container>
    <!-- <div class="data-content">
      📅 小组赛程
    </div> -->
    <VanTabs v-model:active="active" swipeable>
      <VanTab v-for="itemF in matchItems" :title="itemF.title"  :key="itemF.date">
        <div v-if="itemF.isDelay">
          <van-empty description="由于天气原因，比赛顺延" />
        </div>
        <div v-else class="card-cont" v-for="item in itemF.matchList" :key="item.title" @click="jumpToDetail(item)">
          <div class="card-head">
            {{item.title}}
            <span v-if="item.match.team1Score > 0">(已结束)</span>
          </div>
          <van-row class="card-body">
            <van-col span="9">{{item.match.team}}</van-col>
            <van-col span="6" class="score" v-if="item.match.team1Score > 0"><span>{{item.match.team1Score}}</span> : <span>{{item.match.team2Score}}</span></van-col>
            <van-col span="6" v-else>{{item.match.time}}</van-col>
            <van-col span="9">{{item.match.team2}}</van-col>
          </van-row>
          <!-- <div class="card-body">
            <p>{{item.match.team}}</p>
            <span>{{item.match.time}}</span>
            <p>{{item.match.team2}}</p>
          </div> -->

        </div>
    </VanTab>
</VanTabs>
  </Container>
</template>

<style lang="less" scoped>
.card-cont{
  width: 96%;
  background: #fff;
  border-radius: 10px;
  margin: 20px auto;
  box-shadow: 2px 2px 6px #e2eefc;
  .card-head{
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #111;
    border-bottom: 1px solid #eee;
    span{
      font-weight: bold;
      color: #555;
    }
  }
  .card-body{
    width: 100%;
    height: 80px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    .van-col:nth-child(2n-1){
      font-weight: bold;
      font-size: 16px
    };
    .score{
      font-weight: bold;
      font-size: 16px;
      color: red;
    }
    
    
  }
}


</style>
